<template>
  <div class="d_main">
    <!-- 操作区 S-->
    <div class="d_operationBox">
      <div class="d_btn">
        <el-button type="primary" size="small" icon="el-icon-plus" v-permission="'MenuCode5-4-1'" @click="addPurchaseDialog">新建</el-button>
      </div>
      <div class="d_search">
      <screec
          v-model="search.QueryDataBaseFiled"
          :headData.sync="tableHead"
          :disabled="searchLoading"
        ></screec>
        <el-input
          v-model="search.likeWords"
          placeholder="请输入关键字"
          size="small"
          @keyup.enter.native="getAllPurchase"
        >
          <el-button
            slot="append"
            :loading="searchLoading"
            type="primary"
            icon="el-icon-search"
            :disabled="searchLoading"
            element-loading-spinner="el-icon-loading"
            @click="getAllPurchase"
          >
            搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <!-- 操作区 E-->
    <!-- 表格操作区 S-->
    <div class="d_tableOperation">
      <div class="d_condition" />
      <div class="d_set">
        <div @click="Refresh"><i class="d_icon el-icon-refresh-right" /></div>
        <div class="setting flex">
          <HeadSeting :list-data.sync="tableHead" :table-code="$config.purchaseOrderList" @reset="getTableHead" />
        </div>
      </div>
    </div>
    <!-- 表格操作区 E-->
    <!--table板块-->
    <div ref="tableCon" class="tableCon">
      <el-table
        v-show="tableHead.length>0"
        id="emtable"
        ref="multipleTable"
        v-loading="searchLoading"
        :data="purchasDatas"
        :height="tableHeight || 'auto'"
        border
        :summary-method="getSummaries"
        show-summary
        fit
        style="width: 100%"
        @header-dragend="surverWidth"
      >
        <!-- 复选框       -->
        <!--        <el-table-column type="selection" width="40" fixed="left" />-->
        <template v-for="(fruit,index) in tableHead">
          <el-table-column
            v-if="fruit.visible"
            :key="index"
            :label="fruit.columnName"
            :min-width="fruit.columnWidth || 110"
            :prop="fruit.columnCode"
            show-overflow-tooltip
            :fixed="fruit.isFloat?'left':false"
          >
            <template slot-scope="scope">
              <template v-if="fruit.columnCode==='purchaseOrderStateName'">
                <div class="flex">
                  <template v-if="scope.row.purchaseOrderState===0">
                    <span class="mr5 spot" style="background: #3F61F1" /><span>待确认</span>
                  </template>
                  <template v-else-if="scope.row.purchaseOrderState===2">
                    <span class="mr5 spot" style="background:#67C23A" /><span>已到货</span>
                  </template>
                  <template v-else-if="scope.row.purchaseOrderState===-1">
                    <span class="mr5 spot" style="background:#999AAA" /><span>作废</span>
                  </template>
                  <template v-else>
                    <span class="mr5 spot" style="background:#3F61F1" /><span>待到货</span>
                  </template>
                </div>
              </template>
              <template v-else-if="fruit.columnCode==='stockStateName'">
                <div class="flex">
                  <template v-if="scope.row.inStockState===0">
                    <span class="mr5 spot" style="background: #3F61F1" /><span>待入库</span>
                  </template>
                  <template v-else-if="scope.row.inStockState===1">
                    <span class="mr5 spot" style="background:#67C23A" /><span>已入库</span>
                  </template>
                  <template v-else>
                    <span class="mr5 spot" style="background:#E13335" /><span>已拒绝</span>
                  </template>
                </div>
              </template>
              <template v-else>
                {{ scope.row[fruit.columnCode] }}
              </template>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="70" align="center" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="bottom-end"
                popper-class="tableOp"
                width="160"
                :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                trigger="click"
              >
                <div class="operation">
                  <ul>
                    <li @click="seePurchase(scope.row)">
                      查看
                    </li>
                    <li v-if="scope.row.purchaseOrderState===0" v-permission="'MenuCode5-4-2'" @click="updatedPurchase(scope.row)">
                      修改
                    </li>
                  </ul>
                  <ul v-if="scope.row.purchaseOrderState===0" v-permission="'MenuCode5-4-3'">
                    <li @click="confirmClick(scope.row)">确认</li>
                  </ul>
                  <ul v-if="scope.row.purchaseOrderState===0" v-permission="'MenuCode5-4-4'">
                    <li @click="deletePurchase(scope.row.purchaseID)">删除</li>
                  </ul>
                  <ul v-if="scope.row.purchaseOrderState===1" v-permission="'MenuCode5-4-5'">
                    <li @click="arrivalClick(scope.row)">到货确认</li>
                  </ul>
                  <ul v-if="scope.row.purchaseOrderState===-1 || scope.row.stockState===-1" v-permission="'MenuCode5-4-6'">
                    <li @click="copyPurchase(scope.row)">复制</li>
                  </ul>
                </div>
                <div slot="reference" class="opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 骨架屏     -->
      <div v-if="tableHead.length==0" class="p16">
        <el-skeleton :rows="6" animated />
      </div>
    </div>
    <!-- 分页 S-->
    <div class="d_pag">
      <pagination
        :total="total||0"
        :page.sync="search.pageIndex"
        :limit.sync="search.pageSize"
        @pagination="getAllPurchase"
      />
    </div>
    <!-- 分页 E-->
    <!-- 人员寻找弹框   -->
    <per-redio-dialog :per-visible.sync="isperShow" @getEmployee="getEmployee" />
    <!-- 新建采购   -->
    <el-dialog
      :title="ops === 'modify'?'采购编辑':'新建采购'"
      :visible.sync="isAddPurchase"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">采购单号：</span>{{ purchaseForm.purchaseOrderNo }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{ purchaseForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ ops === 'modify'? purchaseForm.createPersonName:name }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form
            ref="purchaseForm"
            :model="purchaseForm"
            :rules="rules"
            label-width="110px"
            label-position="left"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="采购类型" prop="purchaseType">
                  <el-select
                        filterable v-model="purchaseForm.purchaseType" placeholder="采购类型" size="mini">
                    <el-option
                      v-for="item in purchaseTypes"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="供应商" prop="supplierCode">
                  <el-select
                        filterable v-model="purchaseForm.supplierCode" placeholder="供应商" size="mini" filterable @change="supplierChange">
                    <el-option
                      v-for="item in allSupliers"
                      :key="item.supplierID"
                      :label="item.supplierName"
                      :value="item.supplierCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input
                    v-model="purchaseForm.purchasePersonName"
                    placeholder="请输入内容"
                    size="mini"
                  >
                    <template slot="append">
                      <el-button slot="append" icon="el-icon-user" @click="isperShow=true" />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="期望到货日期" prop="expectArrivalTime">
                  <el-date-picker
                    v-model="purchaseForm.expectArrivalTime"
                    type="date"
                    :picker-options="option"
                    placeholder="选择日期"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="采购备注" class="inlineText">
              <el-input v-model="purchaseForm.purchaseDesc" type="textarea" :rows="1" placeholder="采购备注" size="mini" clearable />
            </el-form-item>

          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">采购明细</span>
              <span class="c_3F61F1 mr15 pointer" @click="newAddClick"><i class="el-icon-plus mr5" /> 新增</span>
            </div>
            <div ref="bigdialogTable" class="bigdialogTbCon">
              <el-table
                :data="purchaseForm.purchaseDetailsList"
                border
                style="width: 100%"
              >
                <el-table-column
                  label="物料编号"
                  prop="goodsCode"
                  show-overflow-tooltip
                  min-width="110"
                />
                <el-table-column
                  label="物料类型"
                  prop="categoryName"
                  min-width="90"
                />
                <el-table-column
                  label="供应商"
                  prop="supplierName"
                  show-overflow-tooltip
                  min-width="90"
                />
                <el-table-column
                  label="物料名称"
                  prop="goodsName"
                  show-overflow-tooltip
                  min-width="110"
                />
                <el-table-column
                  label="规格型号"
                  prop="stockGoodsName"
                  min-width="90"
                />
                <el-table-column
                  label="当前库存数量"
                  prop="stockQuantity"
                  min-width="110"
                  v-if="ops === 'modify'"
                />
                <el-table-column
                  label="当前库存数量"
                  prop="stockSumQuantity"
                  min-width="110"
                  v-else
                />
                <el-table-column
                  label="采购数量"
                  show-overflow-tooltip
                  min-width="90"
                >
                  <template slot-scope="{row}">
                    <el-input
                      v-model="row.planPurchaseQuantity"
                      placeholder="请输入"
                      size="mini"
                      onkeyup="value=value.replace(/[^\d]/g,'')"
                      @input="getPurTotalPrice(row)"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="物料单位"
                  prop="goodsUnitName"
                  min-width="110"
                />
                <el-table-column
                  label="备注"
                  show-overflow-tooltip
                  min-width="150"
                >
                  <template slot-scope="{row}">
                    <el-input v-model="row.purchaseDesc" placeholder="请输入" size="mini" />
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  fixed="right"
                  show-overflow-tooltip
                  min-width="80"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="删除" placement="right-start">
                      <span class="pointer" @click="purchaseDelete(scope.$index)"><i class="el-icon-delete" /></span>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddPurchase=false">取 消</el-button>
        <!-- 新增       -->
        <el-button
          v-if="ops === 'add'"
          :loading="addPurLoading"
          :disabled="addPurLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="savePuchase"
        >保存</el-button>
        <!-- 复制重开       -->
        <el-button
          v-if="ops === 'copy'"
          :loading="addPurLoading"
          :disabled="addPurLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="copyReopen"
        >保存</el-button>
        <!--  修改      -->
        <el-button
          v-if="ops === 'modify'"
          :loading="addPurLoading"
          :disabled="addPurLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="editSavePuchase"
        >保存</el-button>
      </div>
    </el-dialog>
    <!-- 查看采购--没到货之前的查看弹框   -->
    <el-dialog
      title="查看采购"
      :visible.sync="isSeePurchase"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">采购单号：</span>{{ purchaseForm.purchaseOrderNo }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{ purchaseForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ ops === 'modify'? purchaseForm.createPersonName:name }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form
            disabled
            :model="purchaseForm"
            label-width="110px"
            label-position="left"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="采购类型" prop="purchaseType">
                  <el-select
                        filterable v-model="purchaseForm.purchaseType" placeholder="采购类型" size="mini">
                    <el-option
                      v-for="item in purchaseTypes"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="供应商" prop="supplierCode">
                  <el-select
                        filterable v-model="purchaseForm.supplierCode" placeholder="供应商" size="mini" @change="supplierChange">
                    <el-option
                      v-for="item in allSupliers"
                      :key="item.supplierID"
                      :label="item.supplierName"
                      :value="item.supplierCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input
                    v-model="purchaseForm.purchasePersonName"
                    placeholder="请输入内容"
                    size="mini"
                  >
                    <template slot="append">
                      <el-button slot="append" icon="el-icon-user" @click="isperShow=true" />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="期望到货日期" prop="expectArrivalTime">
                  <el-date-picker
                    v-model="purchaseForm.expectArrivalTime"
                    type="date"
                    :picker-options="option"
                    placeholder="选择日期"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="采购备注" class="inlineText">
              <el-input v-model="purchaseForm.purchaseDesc" type="textarea" :rows="1" placeholder="采购备注" size="mini" clearable />
            </el-form-item>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">采购明细</span>
            </div>
            <div class="bigdialogTbCon">
              <el-table
                :data="purchaseForm.purchaseDetailsList"
                border
                style="width: 100%"
              >
                <el-table-column
                  label="物料编号"
                  prop="goodsCode"
                  show-overflow-tooltip
                  min-width="110"
                />
                <el-table-column
                  label="物料类型"
                  prop="categoryName"
                  min-width="90"
                />
                <el-table-column
                  label="供应商"
                  prop="supplierName"
                  show-overflow-tooltip
                  min-width="90"
                />
                <el-table-column
                  label="物料名称"
                  prop="goodsName"
                  show-overflow-tooltip
                  min-width="110"
                />
                <el-table-column
                  label="规格型号"
                  prop="stockGoodsName"
                  min-width="90"
                />
                <el-table-column
                  label="当前库存数量"
                  prop="stockQuantity"
                  min-width="110"
                />
                <el-table-column
                  label="采购数量"
                  show-overflow-tooltip
                  min-width="90"
                  prop="planPurchaseQuantity"
                />
                <el-table-column
                  label="物料单位"
                  prop="goodsUnitName"
                  min-width="110"
                />
                <el-table-column
                  label="备注"
                  show-overflow-tooltip
                  prop="purchaseDesc"
                  min-width="150"
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isSeePurchase=false">取 消</el-button>
        <el-button v-if="isSee" type="primary" size="mini" @click="isSeePurchase=false">确定</el-button>
        <el-button
          v-if="!isSee"
          :loading="addPurLoading"
          :disabled="addPurLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="confirmPuchase"
        >确认</el-button>
      </div>
    </el-dialog>
    <!-- 到货确认弹框   -->
    <el-dialog
      title="到货确认"
      :visible.sync="isArrivalConfrim"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">采购单号：</span>{{ purchaseForm.purchaseOrderNo }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{ purchaseForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ purchaseForm.createPersonName }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form
            :model="purchaseForm"
            label-width="110px"
            label-position="left"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="采购类型" prop="purchaseType">
                  <el-select
                        filterable v-model="purchaseForm.purchaseType" placeholder="采购类型" size="mini" disabled>
                    <el-option
                      v-for="item in purchaseTypes"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="供应商" prop="supplierCode">
                  <el-select
                        filterable v-model="purchaseForm.supplierCode" placeholder="供应商" size="mini" disabled @change="supplierChange">
                    <el-option
                      v-for="item in allSupliers"
                      :key="item.supplierID"
                      :label="item.supplierName"
                      :value="item.supplierCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input
                    v-model="purchaseForm.purchasePersonName"
                    placeholder="请输入内容"
                    disabled
                    size="mini"
                  >
                    <template slot="append">
                      <el-button slot="append" icon="el-icon-user" @click="isperShow=true" />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="期望到货日期" prop="expectArrivalTime">
                  <el-date-picker
                    v-model="purchaseForm.expectArrivalTime"
                    type="date"
                    :picker-options="option"
                    disabled
                    placeholder="选择日期"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发票号码" prop="expectArrivalTime">
                  <el-input v-model="purchaseForm.invoiceNumber" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="采购备注" class="inlineText">
              <el-input v-model="purchaseForm.purchaseDesc" type="textarea" :rows="1" placeholder="采购备注" size="mini" clearable />
            </el-form-item>
            <el-form-item label="拒绝原因" class="inlineText" v-if="purchaseForm.inStockState == -1">
              <el-input v-model="purchaseForm.stockStateDesc" type="textarea" :rows="1" placeholder="拒绝原因" size="mini" clearable disabled />
            </el-form-item>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">采购明细</span>
            </div>
            <div class="bigdialogTbCon">
              <el-table
                :data="purchaseForm.purchaseDetailsList"
                border
                style="width: 100%"
              >
                <el-table-column
                  label="物料编号"
                  prop="stockGoodsCode"
                  show-overflow-tooltip
                  min-width="110"
                />
                <el-table-column
                  label="物料类型"
                  prop="categoryName"
                  min-width="90"
                />
                <el-table-column
                  label="供应商"
                  prop="supplierName"
                  show-overflow-tooltip
                  min-width="90"
                />
                <el-table-column
                  label="物料名称"
                  prop="goodsName"
                  show-overflow-tooltip
                  min-width="110"
                />
                <el-table-column
                  label="规格型号"
                  prop="stockGoodsName"
                  min-width="90"
                />
                <el-table-column
                  label="采购数量"
                  show-overflow-tooltip
                  min-width="90"
                  prop="planPurchaseQuantity"
                />
                <el-table-column
                  label="到货数量"
                  prop="purchaseQuantity"
                  min-width="110"
                >
                  <template slot-scope="{row}">
                    <el-input v-model="row.purchaseQuantity" placeholder="请输入" size="mini" @input="quantityUpdate(row)" />
                  </template>
                </el-table-column>
                <el-table-column
                  label="物料单位"
                  show-overflow-tooltip
                  min-width="90"
                  prop="goodsUnitName"
                />
                <el-table-column
                  label="上次单价/米"
                  show-overflow-tooltip
                  min-width="110"
                  prop="previousPrice"
                />
                <el-table-column
                  label="单价/米"
                  prop="purchasePrice"
                  min-width="110"
                >
                  <template slot-scope="{row}">
                    <el-input
                      v-model="row.purchasePrice"
                      v-toFixed="6"
                      placeholder="请输入"
                      size="mini"
                      @change="purchasePriceUpdate(row)"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="换算数量"
                  show-overflow-tooltip
                  min-width="90"
                  prop="specificationQuantity"
                />
                <el-table-column
                  label="转换比例"
                  show-overflow-tooltip
                  min-width="90"
                  prop="specificationJsValue"
                />
                <el-table-column
                  label="换算单位"
                  show-overflow-tooltip
                  min-width="90"
                  prop="priceUnitName"
                />
                <el-table-column
                  label="换算单价"
                  prop="specificationPrice"
                  min-width="110"
                >
                  <template slot-scope="{row}">
                    <el-input v-model="row.specificationPrice" :disabled="row.isPriceUnit == 0" placeholder="请输入" size="mini" @change="specificationPriceUpdate(row)" />
                  </template>
                </el-table-column>
                <el-table-column
                  label="总金额"
                  prop="totalAmount"
                  min-width="110"
                >
                  <template slot-scope="{row}">
                    <el-input v-model="row.totalAmount" placeholder="请输入" size="mini" @change="totalAmountUpdate(row)" />
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  show-overflow-tooltip
                  prop="purchaseDesc"
                  min-width="150"
                >
                  <template slot-scope="{row}">
                    <el-input v-model="row.purchaseDesc" placeholder="请输入" size="mini" />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isArrivalConfrim=false">取 消</el-button>
        <el-button
          v-loading="addPurLoading"
          :disabled="addPurLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="arrivalConfirm"
        >到货确认</el-button>
      </div>
    </el-dialog>
    <!-- 查看采购--到货查看弹框   -->
    <el-dialog
      title="查看采购"
      :visible.sync="isArrivalSee"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">采购单号：</span>{{ purchaseForm.purchaseOrderNo }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{ purchaseForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ purchaseForm.createPersonName }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form
            disabled
            :model="purchaseForm"
            label-width="110px"
            label-position="left"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="采购类型" prop="purchaseType">
                  <el-select
                        filterable v-model="purchaseForm.purchaseType" placeholder="采购类型" size="mini">
                    <el-option
                      v-for="item in purchaseTypes"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="供应商" prop="supplierCode">
                  <el-select
                        filterable v-model="purchaseForm.supplierCode" placeholder="供应商" size="mini" @change="supplierChange">
                    <el-option
                      v-for="item in allSupliers"
                      :key="item.supplierID"
                      :label="item.supplierName"
                      :value="item.supplierCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input
                    v-model="purchaseForm.purchasePersonName"
                    placeholder="请输入内容"
                    size="mini"
                  >
                    <template slot="append">
                      <el-button slot="append" icon="el-icon-user" @click="isperShow=true" />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="期望到货日期" prop="expectArrivalTime">
                  <el-date-picker
                    v-model="purchaseForm.expectArrivalTime"
                    type="date"
                    :picker-options="option"
                    placeholder="选择日期"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际到货日期" prop="expectArrivalTime">
                  <el-date-picker
                    v-model="purchaseForm.arrivalTime"
                    type="date"
                    :picker-options="option"
                    placeholder="选择日期"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发票号码">
                  <el-input
                    v-model="purchaseForm.invoiceNumber"
                    placeholder="请输入内容"
                    size="mini"
                    disabled
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="采购备注" class="inlineText">
              <el-input v-model="purchaseForm.purchaseDesc" type="textarea" :rows="1" placeholder="采购备注" size="mini" clearable />
            </el-form-item>
            <el-form-item label="拒绝原因" class="inlineText" v-if="purchaseForm.inStockState == -1">
              <el-input v-model="purchaseForm.stockStateDesc" type="textarea" :rows="1" placeholder="拒绝原因" size="mini" clearable disabled />
            </el-form-item>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">采购明细</span>
            </div>
            <div class="bigdialogTbCon">
              <el-table
                :data="purchaseForm.purchaseDetailsList"
                border
                style="width: 100%"
              >
                <el-table-column
                  label="物料编号"
                  prop="stockGoodsCode"
                  show-overflow-tooltip
                  min-width="110"
                />
                <el-table-column
                  label="物料类型"
                  prop="categoryName"
                  min-width="90"
                />
                <el-table-column
                  label="供应商"
                  prop="supplierName"
                  show-overflow-tooltip
                  min-width="90"
                />
                <el-table-column
                  label="物料名称"
                  prop="goodsName"
                  show-overflow-tooltip
                  min-width="110"
                />
                <el-table-column
                  label="规格型号"
                  prop="stockGoodsName"
                  min-width="90"
                />
                <el-table-column
                  label="采购数量"
                  show-overflow-tooltip
                  min-width="90"
                  prop="planPurchaseQuantity"
                />
                <el-table-column
                  label="到货数量"
                  prop="purchaseQuantity"
                  min-width="110"
                />
                <el-table-column
                  label="物料单位"
                  show-overflow-tooltip
                  min-width="90"
                  prop="goodsUnitName"
                />
                <el-table-column
                  label="上次单价/米"
                  show-overflow-tooltip
                  min-width="110"
                  prop="previousPrice"
                />
                <el-table-column
                  label="单价/米"
                  prop="purchasePrice"
                  min-width="110"
                />
                <el-table-column
                  label="换算数量"
                  show-overflow-tooltip
                  min-width="90"
                  prop="specificationQuantity"
                />
                <el-table-column
                  label="换算单位"
                  show-overflow-tooltip
                  min-width="90"
                  prop="priceUnitName"
                />
                <el-table-column
                  label="换算单价"
                  prop="specificationPrice"
                  min-width="110"
                />
                <el-table-column
                  label="总金额"
                  prop="totalAmount"
                  min-width="110"
                />
                <el-table-column
                  label="备注"
                  show-overflow-tooltip
                  prop="purchaseDesc"
                  min-width="150"
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isArrivalSee=false">取 消</el-button>
        <el-button type="primary" size="mini" @click="isArrivalSee=false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 选择物料   -->
    <el-dialog
      title="选择物料"
      :visible.sync="isPurchaseInfo"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="70%"
    >
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex flex_end" style="border-bottom: none">
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="materSearch.likeWords"
              placeholder="输入关键字"
              size="small"
            >
              <el-button
                slot="append"
                v-loading="marLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="marLoading"
                element-loading-spinner="el-icon-loading"
                @click="getAllMarList"
              >
                搜索
              </el-button>
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon">
          <el-table
            :data="allMateriels"
            border
            height="490"
            style="width: 100%"
            @selection-change="on_SelectSion"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="goodsCode"
              label="物料编号"
              min-width="110"
            />
            <el-table-column
              prop="stockGoodsCode"
              label="规格编号"
              min-width="110"
            />
            <el-table-column
              prop="goodsName"
              label="物料名称"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="stockGoodsName"
              label="规格型号"
              min-width="100"
            />
            <el-table-column
              prop="supplierName"
              label="供应商"
              min-width="90"
            />
            <el-table-column
              prop="categoryName"
              label="物料类型"
              min-width="90"
            />
            <el-table-column
              prop="stockSumQuantity"
              label="库存数量"
              min-width="70"
            />
            <el-table-column
              prop="goodsUnitName"
              label="单位"
              min-width="70"
            />
            <el-table-column
              prop="groupName"
              label="所属分组"
              min-width="90"
            />
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isPurchaseInfo=false">取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="confirmSelecd"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import HeadSeting from '@/components/HeadSeting'
import perRedioDialog from '@/components/perDialogRedio'
import { arraySort } from '@/utils'
import { mapGetters } from 'vuex'
import screec from "@/components/screen";

export default {
  name: 'Purchase',
  components: { Pagination, HeadSeting, perRedioDialog,screec },
  computed: {
    ...mapGetters([
      'name',
      'userInfo'
    ])
  },
  data() {
    return {
      isSee: true, // 是否是查看操作
      isArrivalSee: false, // 采购到货详情查看弹框
      isArrivalConfrim: false, // 到货确认弹框
      ops: 'add', // 采购操作、新建，修改，复制重开
      isSeePurchase: false, // 查看弹框是否打开
      marLoading: false, // 所有物料加载效果
      isPurchaseInfo: false, // 新增明细弹框
      isperShow: false, // 选中人员弹框
      // 设置时间控件小于当前日期不能选择
      option: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
        }
      },
      purchaseForm: {
        purchaseOrderNo: '系统自动生成', // 采购订单号
        purchaseType: '', // 采购类型
        supplierCode: '',
        expectArrivalTime: '', // 期望到货时间
        purchasePersonCode: '', // 申请人员code
        purchasePersonName: '', // 申请人员显示字段
        organizationCode: '', // 组织编码
        organizationName: '', // 公司名字，显示字段
        departmentCode: '', // 部门编码
        departmentName: '', // 部门名称
        purchaseDesc: '', // 采购说明
        invoiceNumber: '', // 发票号码
        purchaseDetailsList: []
      }, // 新建采购表单
      addPurLoading: false, // 新建采购保存加载效果
      searchLoading: false, // 采购列表加载效果
      // 采购列表查询条件
      search: {
         QueryDataBaseFiled:'',
        pageIndex: 1,
        pageSize: 30,
        likeWords: '',
        inStockState: -2,
        purchaseOrderState: -2
      },
      purchasDatas: [], // 采购列表数据
      total: 0, // 采购数据总条数
      purchaseTypes: [], // 所有采购类型列表
      tableHead: [], // 表头
      tableHeight: null, // 表格最大高度
      dialogTableHeight: null, // 弹框里面得表格最大高度
      // 选择物料搜索条件
      materSearch: {
        likeWords: '',
        supplierCode: '',
        warehouseCode: '',
        warehouseAreaCode: ''
      },
      purchaseID: '', // 采购ID
      isAddPurchase: false, // 采购新建弹框是否打开
      allSupliers: [], // 供应商列表
      materierlLists: [], // 选中物料
      allMateriels: [], // 当前供应商下面的物料
      rules: {
        purchaseType: [
          { required: true, message: '请选择采购类型', trigger: 'change' }
        ],
        supplierCode: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ],
        expectArrivalTime: [
          { required: true, message: '请选择期望到货时间', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    // 采购列表
    this.getAllPurchase()
    // 采购列表表格头部
    this.getTableHead()
    // 供应商
    this.getSupplier()
    // 所有采购类型
    this.getAllPurTypes()
  },
  mounted() {
    // 表格高度
    this.calHeight()
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout()
    })
  },
  methods: {
    // 总金额发生改变
    totalAmountUpdate(row) {
      if(row.isPriceUnit == 0){
        row.purchasePrice = parseFloat(((row.totalAmount / row.purchaseQuantity)).toFixed(6))
      }else{
        row.specificationPrice = parseFloat((row.totalAmount / row.specificationQuantity).toFixed(6))
        row.purchasePrice = parseFloat((row.specificationPrice/row.specificationJsValue).toFixed(6))
      }
    },
    // 换算单价改变
    specificationPriceUpdate(row) {
      if(row.isPriceUnit != 0){
        row.totalAmount =  parseFloat((row.specificationQuantity * row.specificationPrice).toFixed(6))
        row.purchasePrice = parseFloat((row.specificationPrice / row.specificationJsValue).toFixed(6))
      }
    },
    // 单价改变
    purchasePriceUpdate(row) {
      if(row.isPriceUnit == 0){
        row.totalAmount = parseFloat((row.purchaseQuantity * row.purchasePrice).toFixed(6))
      }else{
        row.specificationPrice = parseFloat((row.purchasePrice * row.specificationJsValue).toFixed(6))
        row.totalAmount = parseFloat((row.specificationPrice*row.specificationQuantity).toFixed(6))
      }
    },
    // 到货数量更改
    quantityUpdate(row) {
      if(row.isPriceUnit == 0){
        row.totalAmount = parseFloat((row.purchaseQuantity * row.purchasePrice).toFixed(6))
      }else{
        row.specificationQuantity = parseFloat((row.purchaseQuantity * row.specificationJsValue).toFixed(6))
        row.totalAmount = parseFloat((row.specificationQuantity * row.specificationPrice).toFixed(6))

      }
    },
    // 到货确认
    arrivalConfirm() {
      const params = this.purchaseForm
      this.$api.warehouse.ConfirmGoodsPurchaseOrder(params).then(() => {
        this.$message({
          message: '已确认',
          type: 'success'
        })
        this.getAllPurchase()
        this.isArrivalConfrim = false
      })
    },
    // 供应商选择改变事件
    supplierChange(val) {
      this.materSearch.supplierCode = val
      this.purchaseForm.purchaseDetailsList = []
    },
    // 新建采购新增采购明细事件
    newAddClick() {
      if (this.purchaseForm.supplierCode === '') {
        this.$message({
          message: '请选选择供应商',
          type: 'warning'
        })
        return
      }
      // 所有物料
      this.getAllMarList()
      this.isPurchaseInfo = true
    },
    // 打开新建采购弹框
    addPurchaseDialog() {
      this.isAddPurchase = true
      this.ops = 'add'
      this.purchaseForm.purchasePersonCode = this.userInfo.employeeCode
      this.purchaseForm.purchasePersonName = this.userInfo.employeeName
    },
    // 所有物料
    getAllMarList() {
      const parmas = this.materSearch
      this.$api.mater.GetMatchStockGoodss(parmas).then(res => {
        this.allMateriels = res
      })
    },
    // 确认采购
    confirmPuchase() {
      const parmas = {
        entityID: this.purchaseID
      }
      this.$confirm('确定采购?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.addPurLoading = true
        this.$api.warehouse.confirmPuchase(parmas).then(() => {
          this.isSeePurchase = false
          this.addPurLoading = false
          this.getAllPurchase()
          this.$message({
            message: '确认成功',
            type: 'success'
          })
        }).catch(() => {
          this.addPurLoading = false
        })
      })
    },
    // 查看采购详情
    GetPurInfo(id) {
      const parmas = {
        queryBy: 1,
        queryValue: id
      }
      this.$api.warehouse.getPurINfo(parmas).then(res => {
        const newArr = { ...res }
        newArr.purchaseDetailsList.forEach(m => {

          if (m.purchaseQuantity === 0) {
            m.purchaseQuantity = m.planPurchaseQuantity
            m.specificationQuantity = m.purchaseQuantity*m.specificationJsValue
          }
        })
        this.purchaseForm = res
        this.materSearch.supplierCode = res.supplierCode
      })
    },
    // 查看采购点击事件
    seePurchase(data) {
      this.ops = 'modify'
      if (data.purchaseOrderState !== 2) {
        this.isSeePurchase = true
        this.isSee = true
        this.GetPurInfo(data.purchaseID)
      } else {
        this.isArrivalSee = true
        this.GetPurInfo(data.purchaseID)
      }
    },
    // 到货确认
    arrivalClick(data) {
      this.isArrivalConfrim = true
      this.GetPurInfo(data.purchaseID)
    },
    // 修改采购点击事件
    updatedPurchase(data) {
      this.isAddPurchase = true
      this.ops = 'modify'
      this.GetPurInfo(data.purchaseID)
    },
    // 采购确认点击事件
    confirmClick(data) {
      // 采购确认
      this.isSee = false
      this.isSeePurchase = true
      this.GetPurInfo(data.purchaseID)
      this.purchaseID = data.purchaseID
    },
    // 采购复制点击事件
    copyPurchase(data) {
      this.ops = 'copy'
      this.isAddPurchase = true
      this.GetPurInfo(data.purchaseID)
    },
    // 删除采购明细
    deletePurchase(id) {
      const parmas = {
        entityID: id
      }
      this.$confirm('确定删除该采购?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.warehouse.DeletePurchaseDetail(parmas).then(() => {
          this.getAllPurchase()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    // 修改保存
    editSavePuchase() {
      const parmas = this.purchaseForm
      this.$refs.purchaseForm.validate((valid) => {
        if (valid) {
          this.addPurLoading = true
          this.$api.warehouse.UpdatePurchaseOrder(parmas).then(() => {
            this.addPurLoading = false
            this.isAddPurchase = false
            this.getAllPurchase()
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }).catch(() => {
            this.addPurLoading = false
          })
        }
      })
    },
    // 复制重开保存
    copyReopen() {
      const parmas = this.purchaseForm
      this.$refs.purchaseForm.validate((valid) => {
        if (valid) {
          this.addPurLoading = true
          this.$api.warehouse.AddCBPurchaseOrder(parmas).then(() => {
            this.addPurLoading = false
            this.isAddPurchase = false
            this.getAllPurchase()
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          }).catch(() => {
            this.addPurLoading = false
          })
        }
      })
    },
    // 新建采购保存
    savePuchase() {
      const parmas = this.purchaseForm
      this.$refs.purchaseForm.validate((valid) => {
        if (valid) {
          this.addPurLoading = true
          this.$api.warehouse.AddPurchaseOrder(parmas).then(() => {
            this.addPurLoading = false
            this.isAddPurchase = false
            this.getAllPurchase()
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          }).catch(() => {
            this.addPurLoading = false
          })
        }
      })
    },
    // 技术采购总价
    getPurTotalPrice(data) {
      setTimeout(() => {
        const price = Number(data.nowPurchasePrice) || 0
        const num = Number(data.purchaseQuantity) || 0
        data.purchaseAllPrice = num * price * data.specificationJsValue
      }, 500)
    },
    // 删除采购明细
    purchaseDelete(index) {
      this.purchaseForm.purchaseDetailsList.splice(index, 1)
    },
    // 选择物料
    confirmSelecd() {
      const array = JSON.parse(JSON.stringify(this.purchaseForm.purchaseDetailsList))
      const arr = JSON.parse(JSON.stringify(this.materierlLists))
      arr.forEach(item => {
        item.planPurchaseQuantity = 0
        item.purchaseDesc = ''
      })
      this.purchaseForm.purchaseDetailsList = arr.reduce((result, item) => {
        const val = result.some(({ stockGoodsCode }) => stockGoodsCode === item.stockGoodsCode)
        if (!val) {
          result.push(item)
        }
        return result
      }, array)
      this.isPurchaseInfo = false
    },
    // 商品明细表格选中复选框操作
    on_SelectSion(val) {
      this.materierlLists = val
    },
    // 得到申请人员
    getEmployee(val) {
      this.purchaseForm.purchasePersonCode = val.employeeCode
      this.purchaseForm.purchasePersonName = val.employeeName
      this.purchaseForm.organizationCode = val.organizationCode
      this.purchaseForm.organizationName = val.organizationName
      this.purchaseForm.departmentCode = val.departmentCode
      this.purchaseForm.departmentName = val.departmentName
    },
    // 所有采购类型
    getAllPurTypes() {
      this.$api.warehouse.GetAllPurchaseType().then(res => {
        this.purchaseTypes = res
      })
    },
    // 供应商
    getSupplier() {
      this.$api.mater.GetAllSuppliers().then(res => {
        this.allSupliers = res
      })
    },
    // 合计方法
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (column.property === 'totalCount' || column.property === 'totalAmount') {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index]++
          } else {
            sums[index] = ' '
          }
        }
      })

      return sums
    },
    // 全部物料，清除所有查询条件
    Refresh() {
      this.search = this.$options.data().search
      this.getAllPurchase()
    },
    // 采购列表
    getAllPurchase() {
      const parmas = this.search
      this.searchLoading = true
      this.$api.warehouse.getAllPurchaseList(parmas).then(res => {
        this.searchLoading = false
        this.purchasDatas = res.list
        this.purchasDatas.forEach((item)=>{
            for(let i in item){
              if(!item[i] && item[i] !== 0){
                item[i] = '--'
              }
            }
          })
        this.total = res.totalCount
      }).catch(() => {
        this.searchLoading = false
      })
    },
    // 采购列表表格头部
    getTableHead() {
      const parmas = {
        tableCode: this.$config.purchaseOrderList
      }
      this.$api.common.getAllTableHead(parmas).then(res => {
        res.sort(arraySort('columnSort'))
        this.tableHead = res
      })
    },
    // 保存表头样式变化
    saveHead(newArray) {
      const parmas = newArray
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas).then(() => {
        })
      }, 300)
    },
    // 保存表头列宽度
    surverWidth(newWidth, oldWidth, column) {
      setTimeout(() => {
        const heads = [...this.tableHead]
        heads.forEach(item => {
          if (item.columnCode === column.property) {
            item.columnWidth = column.width
            return
          }
        })
        this.saveHead(heads)
      }, 100)
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect()
        this.tableHeight = rect.height
      })
    },
    // 关闭弹框事件
    closeDialog() {
      // 关闭弹框的时候清空数据
      if (this.$refs.purchaseForm) {
        this.$refs.purchaseForm.resetFields()
      }
      this.purchaseForm = this.$options.data().purchaseForm
    }
  }
}
</script>
<style lang="scss" scoped>
.spot{
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
}
.addWuliaoBox {
  padding: 10px 16px;

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
  }
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}
</style>
